<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap 101 Template</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
		img{
			width: 140px;
			height: 140px;
		}
		.right-main-content{
			margin-top: 80px;
		}
	</style>
</head>

<body>
	<!-- 1.导航栏 -->
	<nav class="navbar navbar-inverse navbar-fixed-top  " style="border-radius: 0px;">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">Brand</a>
			</div>
			<div class="collapse navbar-collapse hidden-xs" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="#"><span class="glyphicon glyphicon-home"></span>Home </a></li>
					<li><a href="#">Link </a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>

				</ul>
				<ul class="nav navbar-nav navbar-right ">
					<li><a href="#">Link </a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
				<form class="navbar-form  navbar-right">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
				</form>

			</div>
		</div>
	</nav>
	<!-- 布局 -->
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-3 col-md-3 col-sm-4 hidden-xs menus-left-side" style="position: fixed;top: 70px;padding: 0px;bottom: 0px; overflow:auto;">
				<div class="list-group">
					<a href="#page1" class="list-group-item active">
						页面一
					</a>
					<a href="#page2" class="list-group-item">页面二</a>
					<a href="#page3" class="list-group-item">页面三</a>
					<a href="#page4" class="list-group-item">页面四</a>
					<a href="#page5" class="list-group-item">页面五</a>
				</div>
			</div>
			<div class="right-main-content col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-8 col-sm-offset-4 col-xs-12">
				<div class="row" style="margin-top: 60px;margin-left: 30px;">
					<div class="page-header" style="margin-top: -20px;">
						<h1>Example page header <small>Subtext for header</small></h1>
					</div>
				</div>
				<div class="row text-center">
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
						<img src="./img/01.jpg" class="img-circle" alt="">
						<h3 class="text-muted">Lable</h3>
						<p class="text-muted">你好小爱同学</p>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
						<img src="./img/01.jpg" class="img-circle" alt="">
						<h3 class="text-muted">Lable</h3>
						<p class="text-muted">你好小爱同学</p>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
						<img src="./img/01.jpg" class="img-circle" alt="">
						<h3 class="text-muted">Lable</h3>
						<p class="text-muted">你好小爱同学</p>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
						<img src="./img/01.jpg" class="img-circle" alt="">
						<h3 class="text-muted">Lable</h3>
						<p class="text-muted">你好小爱同学</p>
					</div>
				</div>
				<div class="row" >
					<div class="page-header col-lg-12" >
						<h1>Example page header <small>Subtext for header</small></h1>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
						<table class="table table-striped">
							<thead>
							  <tr>
								<th>#</th>
								<th>First Name</th>
								<th>Last Name</th>
								<th>Username</th>
							  </tr>
							</thead>
							<tbody>
							  <tr>
								<th scope="row">1</th>
								<td>Mark</td>
								<td>Otto</td>
								<td>@mdo</td>
							  </tr>
							  <tr>
								<th scope="row">2</th>
								<td>Jacob</td>
								<td>Thornton</td>
								<td>@fat</td>
							  </tr>
							  <tr>
								<th scope="row">3</th>
								<td>Larry</td>
								<td>the Bird</td>
								<td>@twitter</td>
							  </tr>
							  <tr>
								<th scope="row">3</th>
								<td>Larry</td>
								<td>the Bird</td>
								<td>@twitter</td>
							  </tr>
							  <tr>
								<th scope="row">3</th>
								<td>Larry</td>
								<td>the Bird</td>
								<td>@twitter</td>
							  </tr>
							  <tr>
								<th scope="row">3</th>
								<td>Larry</td>
								<td>the Bird</td>
								<td>@twitter</td>
							  </tr>
							  <tr>
								<th scope="row">3</th>
								<td>Larry</td>
								<td>the Bird</td>
								<td>@twitter</td>
							  </tr>
							  <tr>
								<th scope="row">3</th>
								<td>Larry</td>
								<td>the Bird</td>
								<td>@twitter</td>
							  </tr>
							  <tr>
								<th scope="row">3</th>
								<td>Larry</td>
								<td>the Bird</td>
								<td>@twitter</td>
							  </tr>
							  <tr>
								<th scope="row">3</th>
								<td>Larry</td>
								<td>the Bird</td>
								<td>@twitter</td>
							  </tr>
							</tbody>
						  </table>
					</div>

				</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	<script>

		var map={
			"page1":"subview/page1.html",
			"page2":"subview/page2.html",
			"page3":"subview/page3.html",
			"page4":"subview/page4.html",
			"page5":"subview/page5.html"
		}
		$(".menus-left-side a").click(function(){
			var route=$(this).prop("href").split("#")[1];
			var url=map[route];
			console.log(url);
			// 必须启动服务器
			$(".right-main-content").load(url,function(){
				console.log(url);
			});
		});
	</script>
</body>

</html>